<template>
  <div>
    <p>{{ title }}</p>
    <label v-for="(option, index) in options" :key="index">
      <input
        type="checkbox"
        name="gender2"
        :value="option.value"
        v-model="selectedValue"
        @change="handleChange"
      />
      {{ option.label }}
    </label>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from "vue";

const props = defineProps({
  title: {
    type: String,
    default: "",
  },
});

const selectedValue = ref(props.modelValue);
const options = ref([
  { value: "A", label: "选项A" },
  { value: "B", label: "选项B" },
]);

const emit = defineEmits(["update:modelValue"]);

const handleChange = (event) => {
  emit("update:modelValue", event.target.value);
};

</script>